<template>
  <div>
    <div>
      <span>
        <el-card :body-style="{ padding: '0px' }">
          <div class="image-container">
            <!-- 添加图片容器 -->
            <img :src="productImage.url" class="image" @click="handleImageClick">
          </div>
          <div style="padding: 14px">
            <span> {{ productImage.clothesName }}</span>
            <br>
            <span class="price"><div v-if="productImage.clothesNorms.length > 0">
              ¥{{ productImage.clothesNorms[0].price }}
            </div> </span>
            <!-- <el-tag type="success" effect="dark">75折</el-tag>
            <el-switch v-model="value1" on-value="1" off-value="0" @change="setDiscount" /> -->
            <div class="bottom clearfix">
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate()"
              >{{ $t('clothes.update') }}</el-button>
              <el-button
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete()"
              >{{ $t('clothes.del') }}</el-button>
            </div>
          </div>
        </el-card>
      </span>
    </div>
  </div>
</template>


<script>
export default {
  name: 'ProductImage',
  props: {
    productImage: Object
  },
  data() {
    return {
      value1: '0',
      currentDate: new Date()
    }
  },
  methods: {
    jumpRouter() {
      // 点击图片实现跳转至about页面
      this.$router.push('/about')
    },
    // handleSubmit() {
    //   // 处理表单提交逻辑
    //   console.log('Form submitted with product details:', this.productImage)
    // },
    handleImageClick() {
      this.$emit('showDetails') // 触发自定义事件
    },
    handleUpdate(){
      // this.product = product
        this.$emit('update') // 触发自定义事件
    },
    handleDelete(){
      // this.product = product
        this.$emit('delete') // 触发自定义事件
    },
    setDiscount(val) {
        console.log(val)
    }
  }
}
</script>
<style>
.el-card {
  margin-bottom: 50px; /* 设置卡片之间的垂直间隔 */
  margin-right: 50px;
  /* 如果需要水平间隔，可以添加 margin-right */
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image-container {
  /* 定义图片容器的固定大小 */
  width: 100%; /* 可以根据需要调整 */
  height: 250px; /* 设置固定高度 */
  overflow: hidden; /* 隐藏超出容器的图片部分 */
  position: relative; /* 用于绝对定位子元素 */
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.price{
  color: rgb(223, 72, 72);
}
</style>
